<template>
	<view class="flex-col page">
		<view class="flex-col group_3">
			<image :src="imgUrl+'16557826684196968135.png'" class="image_7" />
			<view class="flex-col group_4">
				<!-- 请输入手机号 -->
				<view class="flex-row">
					<image :src="imgUrl+'16557826680563820686.png'" class="image_8 image_9" />
					<input placeholder="请输入手机号" maxlength="11" border="none" v-model="form.phone" class="input"
						clearable></input>
				</view>
				<!-- 请输入验证码 -->
				<view class="flex-col">
					<!-- <image :src="imgUrl+'16557826684246479237.png'" class="image_10 image_11" /> -->
					<view class="b-line"> </view>
					<view class="justify-between group_7">
						<view class="flex-row">
							<image :src="imgUrl+'16557826687461271724.png'" class="image_8 image_12" />
							<input placeholder="请输入验证码" type="number" maxlength="10" border="none" v-model="form.code"
								class="input" clearable></input>
						</view>
						<text class="text1" @tap="getCode">{{tips}}</text>
						<view class="wrap">
							<u-toast ref="uToast"></u-toast>
							<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
							</u-code>
						</view>
					</view>
				</view>
				<!-- <image :src="imgUrl+'16557826684246479237.png'" class="image_10" /> -->
				<view class="b-line"> </view>
				<view class="justify-between group_9">
					<view class="flex-row">
						<image :src="imgUrl+'16557826680099271215.png'" class="image_8 image_14" />
						<input   v-if="seen" type="text" focus="false" border="none" v-model="form.newPassword"
							placeholder="请输入密码(6~12位字母+数字)" 
							 class="input1" maxlength="12" clearable></input>
						<input  v-else type="password" focus="false" border="none" v-model="form.newPassword"
							placeholder="请输入密码(6~12位字母+数字)" 
							 class="input1" maxlength="12" clearable></input>	
					</view>
					<image v-show='seen' @click="changeSeen" :src="imgUrl+'xianshi.png'" class="image_8" />
					<image v-show='!seen' @click="changeSeen" :src="imgUrl+'yingcang.png'" class="image_8" />
				</view>
				<view class="b-line"></view>
			</view>
			<view class="flex-col items-center button" @click="submit"><text class="text_4">确定</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				//密码显示隐
				usr_pwd: "",
				seen: false,
				type_text: "text",
				type_password: "password",
				form: {
					phone: '',
					code: '',
					newPassword: ''
				},
				tips: '',
				// refCode: null,
				seconds: 60,
				imgUrl: this.$IMG_URL,
			};
		},
		methods: {
			changeSeen() { //密码显隐
				this.seen = !this.seen;
			},
			codeChange(text) {
				this.tips = text;
			},

			getCode() {
				if (this.form.phone) { //判断是否 获取验证码之前 已经输入手机号
					if (this.form.phone == '') {
						this.$u.toast('请输入手机号');
						return;
					} else {
						if (!uni.$u.test.mobile(this.form.phone)) {
							this.$u.toast('手机号码格式错误');
							return;
						}
					}
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						this.$http('user.code', {
							phone: this.form.phone
						}).then(r => {
							if (r.code == 200) {
								this.form.code = r.data;
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							} else {
								uni.$u.toast(r.msg);
							}
						});

					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.$u.toast('请先输入手机号');
				}

			},


			end() {
				uni.$u.toast('请输入验证短信');
			},
			start() {
				uni.$u.toast('我们已经发送了验证短信到你的手机');
			},
			submit() {
				if (this.form.phone == '') {
					this.$u.toast('请输入手机号');
					return;
				} else {
					if (!uni.$u.test.mobile(this.form.phone)) {
						this.$u.toast('手机号码格式错误');
						return;
					}
				}
				if (this.form.code == '') {
					this.$u.toast('请输入验证码');
					return;
				}

				if ((this.form.newPassword == '' || this.form.newPassword.length < 6)) {
					this.$u.toast('密码至少6位(字母+数字)');
					return;
				} else {
					let reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);

					if (!reg.test(this.form.newPassword)) {
						this.$u.toast('密码格式错误,至少6位(字母+数字)');
						return;
					}
				}
				this.$http('luser.forgetPassword', this.form).then(r => {
					if (r.code = 200) {
						uni.showToast({
							title: r.msg,
							duration: 2000,
							success() {
								uni.navigateTo({
									url: "/pages/login/login"
								})

							}
						})

					}
				});


			}
		},
	};
</script>

<style scoped lang="scss">
	.text1 {
		/* width: 140rpx; */
		margin: 0 -60px 0 0;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 40rpx;
		color: #1D6AFF;
		opacity: 1;
	}

	.input {
		width: 350rpx;
		margin-left: 28rpx;
		font-size: 26rpx;
	}

	.input1 {
		width: 450rpx;
		margin-left: 28rpx;
		border: 0;
		font-size: 32rpx;
	}


	.image_10 {
		width: 638rpx;
		height: 2rpx;
	}

	.image_8 {
		width: 44rpx;
		height: 44rpx;
	}

	.input-placeholder {
		font-size: 32rpx;
		color: #C0C4CC;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_3 {
		padding: 29rpx 50rpx 297rpx 56rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.image_7 {
		align-self: center;
		border-radius: 40rpx;
		box-shadow: 0px 8rpx 20rpx 0px #1d6aff1f;
		width: 180rpx;
		height: 180rpx;
	}

	.group_4 {
		margin-top: 177rpx;
	}

	.button {
		margin-right: 6rpx;
		margin-top: 103rpx;
		// padding: 19rpx 0 31rpx;
		height: 88rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.group_6 {
		margin-top: 45rpx;
	}

	.group_9 {
		margin-top: 30rpx;
		// padding: 43rpx 0 42rpx;
	}

	.image_16 {
		margin-left: 4.5rpx;
	}

	.text_4 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
	}

	.image_9 {
		margin-top: 8rpx;
	}

	.text {
		margin-left: 28rpx;
		margin-bottom: 4rpx;
		color: #bfbfbf;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_11 {
		margin-left: 4rpx;
	}

	.group_7 {
		padding-top: 36rpx;
	}

	.b-line {
		margin-top: 30rpx;
		border-bottom: solid 0.5px #f1f1f1;
	}

	.text_2 {
		margin: 3rpx 0 7rpx;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_14 {
		flex-shrink: 0;
	}

	.text_3 {
		margin-left: 28rpx;
		color: #bfbfbf;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_12 {
		margin-top: 9rpx;
		flex-shrink: 0;
	}

	.text_1 {
		margin-left: 28rpx;
		margin-bottom: 5rpx;
		color: #bfbfbf;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}
</style>
